<template>
  <div class="bg">
    <img :src="currentImage" alt="">
    <div class="txt">缱绻盛夏，绮梦之旅：<br>与倾城少女同行，共绘夏日绝美篇章。在这段旅途中，每一抹斜阳，每一缕清风，都将见证你们的相遇与相知。<br>情愫初绽，羁绊渐深：<br>以拼图之名，共解命运之谜。每一次轻触，每一次对视，都在悄然间拉近彼此的距离。言语间流淌的，是心与心的悄然靠近。<br>仲夏夜之梦，情愫绵绵：<br>当夜幕低垂，星光闪烁，你们的情感在月色下静静绽放。这不仅是一段旅程的终点，更是心心相印的开始。</div>
    <div class="back"><router-link to="/"><img src="https://img-blog.csdnimg.cn/direct/c04031a9540043d7bccd344daf184f3f.gif" alt=""></router-link></div>
  </div>
</template>
<script>
export default{
  name: 'guide',
  data(){
    return{
      images:[
        'https://img-blog.csdnimg.cn/direct/79df1abe660a4158891ffce5d406b63d.png',
        'https://img-blog.csdnimg.cn/direct/99c1f675095e458887983f0f836842e4.png',
        'https://img-blog.csdnimg.cn/direct/947bd324936f452abc8f4dab85fb537d.png',
        'https://img-blog.csdnimg.cn/direct/5663129a508a492eb8e317c8178f4070.jpeg',
        'https://img-blog.csdnimg.cn/direct/00dc3bb79ae34b048477762f1aa44dbc.png',
        'https://img-blog.csdnimg.cn/direct/a877c722d54e4db2a8edddc3af17d5c4.png',
        'https://img-blog.csdnimg.cn/direct/64c49fe7618c4f489a960f688daf06ba.jpeg',
        'https://img-blog.csdnimg.cn/direct/4a67fdbbf82c43eea285d19af5e88f6a.png',
        'https://img-blog.csdnimg.cn/direct/755422ae47f14f359196611600ef385f.png',
        'https://img-blog.csdnimg.cn/direct/a6e7cf45e4e047fd97bcccda543fcabd.png',
        'https://img-blog.csdnimg.cn/direct/51da5a859b6e4c65ae7661c72948608e.png',
        'https://img-blog.csdnimg.cn/141bfb0ad8724697ba133e5e19672d42.jpeg',
        'https://img-blog.csdnimg.cn/326344643c274d6c9550f19e69979403.jpeg',
        'https://img-blog.csdnimg.cn/bbd136808536422f8b05c1dda3476a53.png'
      ],
      currentImage: ''
    }
  },
  created() {
    this.setRandomImage();
  },
  methods: {
    setRandomImage() {
      const randomIndex = Math.floor(Math.random() * this.images.length);
      this.currentImage = this.images[randomIndex];
    }
  }
}
</script>
<style scoped>
.bg{
  height: 2500px;
  position: relative;
  overflow: hidden; /* Ensures everything fits within the bounds */
}

.bg img{
  width: 100%;
  height: 100%;
  /* Add a subtle animation to the background image */
  animation: fadeIn 3s ease-in-out forwards;
}

.txt
{
  width: 70%;
  height: auto; /* Allow height to adjust automatically */
  overflow-y: hidden; /* Remove scrollbars */
  position: absolute;
  left: 15%;
  top: 15%;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* Add a slight glow */
  animation: fadeInText 2s ease-in-out forwards;
}

.back
{
  width: 50px;
  height: 50px;
  position: absolute;
  left: 30px;
  top: 30px;
  /* Add a subtle hover effect */
  transition: transform 0.3s ease;
}

.back:hover {
  transform: scale(1.1);
}

/* Keyframe animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInText {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>